<template>
  <div class="pacture">
    <div class="top_box">
      <el-row class="top_box">
        <el-col :span="4" style="padding: 20px">
          <el-card class="box-card" style="padding: 5px">
            <p class="p_style">{{ Code }}</p>
            <p class="p_style">{{ users }}</p>
            <p class="p_style">玉龙县人民医院</p>
          </el-card>
        </el-col>
        <el-col :span="20" style="padding: 20px" class="card_time">
          <el-card class="box-card" style="overflow: auto">
            <ul class="time-horizontal" v-if="true" :style="isUl_width">
              <li v-for="(item, index) in top_time" :key="index">
                <p>{{ item.SectionName }}</p>
                <b></b>{{ item.Time | time }}
              </li>
            </ul>
            <el-steps
              :active="7"
              align-center
              finish-status="process"
              v-if="false"
            >
              <el-step
                title="心脏大血管外科门诊"
                description="2021-11-12"
                icon="el-icon-message-solid"
              ></el-step>
              <el-step
                title="急诊科"
                description="2021-11-13"
                icon="el-icon-message-solid"
              ></el-step>
              <el-step
                title="胸外科门诊"
                description="2021-11-14"
                icon="el-icon-message-solid"
              ></el-step>
              <el-step
                title="心脏大血管外科门诊"
                description="2021-11-14"
                icon="el-icon-message-solid"
              ></el-step>
              <el-step
                title="急诊科"
                description="2021-11-15"
                icon="el-icon-message-solid"
              ></el-step>
              <el-step
                title="心脏大血管外科门诊"
                description="2021-11-16"
                icon="el-icon-message-solid"
              ></el-step>
            </el-steps>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="bottom_box" style="padding: 20px">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="诊断信息" name="OutpatientServiceMedicalRecord">
          <el-table :data="tableData" style="width: 100%" height="600">
            <!-- <el-table-column type="expand">
              <template slot-scope="props">
                <ul class="time-horizontal" v-if="true" :style="isUl_width">
                  <li
                    v-for="item in props.row.time"
                    :key="item.id"
                    style="margin-top: 0px; margin-bottom: 0px"
                  >
                    <p>{{ item.name }}</p>
                    <p>{{ item.name2 }}</p>
                    <p>{{ item.name3 }}</p>
                    <b></b>{{ item.time }}
                  </li>
                </ul>
              </template>
            </el-table-column> -->
            <el-table-column
              v-for="item in 表头"
              :key="item.Code"
              :prop="item.FieldName"
              :label="item.ElementName"
            >
              <!-- <template slot-scope="{ row }">
                <div v-if="item.prop === 'operation'">
                  <el-button
                    size="mini"
                    type="primary"
                    icon="el-icon-view"
                    @click="add(row, '1')"
                    >查看</el-button
                  >
                  <el-button
                    size="mini"
                    type="success"
                    icon="el-icon-view"
                    @click="add(row, '2')"
                    >编辑</el-button
                  >
                </div>
                <div>{{ row[item.prop] }}</div>
              </template> -->
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="医嘱信息" name="InpatientOrders">
          <el-table :data="tableData" style="width: 100%" height="600">
            <!-- <el-table-column type="expand">
              <template slot-scope="props">
                <ul class="time-horizontal" v-if="true" :style="isUl_width">
                  <li
                    v-for="item in props.row.time"
                    :key="item.id"
                    style="margin-top: 0px; margin-bottom: 0px"
                  >
                    <p>{{ item.name }}</p>
                    <p>{{ item.name2 }}</p>
                    <p>{{ item.name3 }}</p>
                    <b></b>{{ item.time }}
                  </li>
                </ul>
              </template>
            </el-table-column> -->
            <el-table-column
              v-for="item in 表头"
              :key="item.Code"
              :prop="item.FieldName"
              :label="item.ElementName"
            >
              <!-- <template slot-scope="{ row }">
                <div v-if="item.prop === 'operation'">
                  <el-button
                    size="mini"
                    type="primary"
                    icon="el-icon-view"
                    @click="add(row, '1')"
                    >查看</el-button
                  >
                  <el-button
                    size="mini"
                    type="success"
                    icon="el-icon-view"
                    @click="add(row, '2')"
                    >编辑</el-button
                  >
                </div>
                <div>{{ row[item.prop] }}</div>
              </template> -->
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane
          label="西医处方用药信息"
          name="WesternMedicinePrescription"
        >
          <el-table :data="tableData" style="width: 100%" height="600">
            <el-table-column type="index" label="序号"> </el-table-column>
            <el-table-column prop="date" label="门（急）诊号">
            </el-table-column>
            <el-table-column prop="name" label="处方编号"> </el-table-column>
            <el-table-column prop="address1" label="开立日期">
            </el-table-column>
            <el-table-column prop="address2" label="有效天数">
            </el-table-column>
            <el-table-column prop="address3" label="开立科室">
            </el-table-column>
            <el-table-column prop="address4" label="疾病诊断编码">
            </el-table-column>
            <el-table-column prop="address5" label="药物名称">
            </el-table-column>
            <el-table-column prop="address6" label="药物规格">
            </el-table-column>
            <el-table-column prop="address7" label="药物剂型">
            </el-table-column>
            <el-table-column prop="address8" label="药物使用剂量">
            </el-table-column>
            <el-table-column prop="address9" label="剂量单位">
            </el-table-column>
            <el-table-column prop="address10" label="药物使用频次">
            </el-table-column>
            <el-table-column prop="address11" label="用药途径">
            </el-table-column>
            <el-table-column prop="address1" label="药物使用总剂量">
            </el-table-column>
            <el-table-column prop="address2" label="开立医师签名">
            </el-table-column>
            <el-table-column prop="address3" label="审核药剂师签名">
            </el-table-column>
            <el-table-column prop="address4" label="调味药剂师签名">
            </el-table-column>
            <el-table-column prop="address5" label="发药药剂师签名">
            </el-table-column>
            <el-table-column prop="address6" label="备注"> </el-table-column>
            <el-table-column prop="address7" label="药品金额">
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="中医处方信息" name="ChineseMedicinePrescription">
          <el-table :data="tableData" style="width: 100%" height="600">
            <!-- <el-table-column type="expand">
              <template slot-scope="props">
                <ul class="time-horizontal" v-if="true" :style="isUl_width">
                  <li
                    v-for="item in props.row.time"
                    :key="item.id"
                    style="margin-top: 0px; margin-bottom: 0px"
                  >
                    <p>{{ item.name }}</p>
                    <p>{{ item.name2 }}</p>
                    <p>{{ item.name3 }}</p>
                    <b></b>{{ item.time }}
                  </li>
                </ul>
              </template>
            </el-table-column> -->
            <el-table-column
              v-for="item in 表头"
              :key="item.Code"
              :prop="item.FieldName"
              :label="item.ElementName"
            >
              <!-- <template slot-scope="{ row }">
                <div v-if="item.prop === 'operation'">
                  <el-button
                    size="mini"
                    type="primary"
                    icon="el-icon-view"
                    @click="add(row, '1')"
                    >查看</el-button
                  >
                  <el-button
                    size="mini"
                    type="success"
                    icon="el-icon-view"
                    @click="add(row, '2')"
                    >编辑</el-button
                  >
                </div>
                <div>{{ row[item.prop] }}</div>
              </template> -->
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="检查结果" name="InspectionRecord">
          <el-table :data="tableData" style="width: 100%" height="600">
            <!-- <el-table-column type="expand">
              <template slot-scope="props">
                <ul class="time-horizontal" v-if="true" :style="isUl_width">
                  <li
                    v-for="item in props.row.time"
                    :key="item.id"
                    style="margin-top: 0px; margin-bottom: 0px"
                  >
                    <p>{{ item.name }}</p>
                    <p>{{ item.name2 }}</p>
                    <p>{{ item.name3 }}</p>
                    <b></b>{{ item.time }}
                  </li>
                </ul>
              </template>
            </el-table-column> -->
            <el-table-column
              v-for="item in 表头"
              :key="item.Code"
              :prop="item.FieldName"
              :label="item.ElementName"
            >
              <!-- <template slot-scope="{ row }">
                <div v-if="item.prop === 'operation'">
                  <el-button
                    size="mini"
                    type="primary"
                    icon="el-icon-view"
                    @click="add(row, '1')"
                    >查看</el-button
                  >
                  <el-button
                    size="mini"
                    type="success"
                    icon="el-icon-view"
                    @click="add(row, '2')"
                    >编辑</el-button
                  >
                </div>
                <div>{{ row[item.prop] }}</div>
              </template> -->
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="检验结果" name="ExaminationRecord">
          <el-table :data="tableData" style="width: 100%" height="600">
            <!-- <el-table-column type="expand">
              <template slot-scope="props">
                <ul class="time-horizontal" v-if="true" :style="isUl_width">
                  <li
                    v-for="item in props.row.time"
                    :key="item.id"
                    style="margin-top: 0px; margin-bottom: 0px"
                  >
                    <p>{{ item.name }}</p>
                    <p>{{ item.name2 }}</p>
                    <p>{{ item.name3 }}</p>
                    <b></b>{{ item.time }}
                  </li>
                </ul>
              </template>
            </el-table-column> -->
            <el-table-column
              v-for="item in 表头"
              :key="item.Code"
              :prop="item.FieldName"
              :label="item.ElementName"
            >
              <!-- <template slot-scope="{ row }">
                <div v-if="item.prop === 'operation'">
                  <el-button
                    size="mini"
                    type="primary"
                    icon="el-icon-view"
                    @click="add(row, '1')"
                    >查看</el-button
                  >
                  <el-button
                    size="mini"
                    type="success"
                    icon="el-icon-view"
                    @click="add(row, '2')"
                    >编辑</el-button
                  >
                </div>
                <div>{{ row[item.prop] }}</div>
              </template> -->
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="手术信息" name="OperationRecord">
          <el-table :data="tableData" style="width: 100%" height="600">
            <!-- <el-table-column type="expand">
              <template slot-scope="props">
                <ul class="time-horizontal" v-if="true" :style="isUl_width">
                  <li
                    v-for="item in props.row.time"
                    :key="item.id"
                    style="margin-top: 0px; margin-bottom: 0px"
                  >
                    <p>{{ item.name }}</p>
                    <p>{{ item.name2 }}</p>
                    <p>{{ item.name3 }}</p>
                    <b></b>{{ item.time }}
                  </li>
                </ul>
              </template>
            </el-table-column> -->
            <el-table-column
              v-for="item in 表头"
              :key="item.Code"
              :prop="item.FieldName"
              :label="item.ElementName"
            >
              <!-- <template slot-scope="{ row }">
                <div v-if="item.prop === 'operation'">
                  <el-button
                    size="mini"
                    type="primary"
                    icon="el-icon-view"
                    @click="add(row, '1')"
                    >查看</el-button
                  >
                  <el-button
                    size="mini"
                    type="success"
                    icon="el-icon-view"
                    @click="add(row, '2')"
                    >编辑</el-button
                  >
                </div>
                <div>{{ row[item.prop] }}</div>
              </template> -->
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="输血记录" name="BloodTransfusionRecord">
          <el-table :data="tableData" style="width: 100%" height="600">
            <!-- <el-table-column type="expand">
              <template slot-scope="props">
                <ul class="time-horizontal" v-if="true" :style="isUl_width">
                  <li
                    v-for="item in props.row.time"
                    :key="item.id"
                    style="margin-top: 0px; margin-bottom: 0px"
                  >
                    <p>{{ item.name }}</p>
                    <p>{{ item.name2 }}</p>
                    <p>{{ item.name3 }}</p>
                    <b></b>{{ item.time }}
                  </li>
                </ul>
              </template>
            </el-table-column> -->
            <el-table-column
              v-for="item in 表头"
              :key="item.Code"
              :prop="item.FieldName"
              :label="item.ElementName"
            >
              <!-- <template slot-scope="{ row }">
                <div v-if="item.prop === 'operation'">
                  <el-button
                    size="mini"
                    type="primary"
                    icon="el-icon-view"
                    @click="add(row, '1')"
                    >查看</el-button
                  >
                  <el-button
                    size="mini"
                    type="success"
                    icon="el-icon-view"
                    @click="add(row, '2')"
                    >编辑</el-button
                  >
                </div>
                <div>{{ row[item.prop] }}</div>
              </template> -->
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="费用明细" name="MedicalExpenseRecord">
          <el-table :data="tableData" style="width: 100%" height="600">
            <!-- <el-table-column type="expand">
              <template slot-scope="props">
                <ul class="time-horizontal" v-if="true" :style="isUl_width">
                  <li
                    v-for="item in props.row.time"
                    :key="item.id"
                    style="margin-top: 0px; margin-bottom: 0px"
                  >
                    <p>{{ item.name }}</p>
                    <p>{{ item.name2 }}</p>
                    <p>{{ item.name3 }}</p>
                    <b></b>{{ item.time }}
                  </li>
                </ul>
              </template>
            </el-table-column> -->
            <el-table-column
              v-for="item in 表头"
              :key="item.Code"
              :prop="item.FieldName"
              :label="item.ElementName"
            >
              <!-- <template slot-scope="{ row }">
                <div v-if="item.prop === 'operation'">
                  <el-button
                    size="mini"
                    type="primary"
                    icon="el-icon-view"
                    @click="add(row, '1')"
                    >查看</el-button
                  >
                  <el-button
                    size="mini"
                    type="success"
                    icon="el-icon-view"
                    @click="add(row, '2')"
                    >编辑</el-button
                  >
                </div>
                <div>{{ row[item.prop] }}</div>
              </template> -->
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="block" style="text-align:center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 15, 20, 50]"
        :page-size="quert.PageSize"
        layout="sizes, prev, pager, next"
        :total="quert.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      quert: {
        PageIndex: 1, //页码
        PageSize: 15, //每页数量
        TableName: "OutpatientServiceMedicalRecord", //表名
        PatientCode: "", //患者主索引
        HospitalId: "00000001", //所在医院id
        total: 1,
      },
      users: "",
      Code: "",
      activeName: "OutpatientServiceMedicalRecord",
      tableData: [],
      top_time: [],
      isUl_width: "",
      表头: [],
    };
  },
  methods: {
    handleClick(tab) {
      this.quert.TableName = tab.name;
      this.quert.PageIndex = 1;
      this.getTab();
    },
    getTab() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(255, 255, 255, 0.9)",
      });
      this.$post("CDR/CDRFieldList?className=" + this.quert.TableName).then(
        (res) => {
          this.表头 = res.data.list;
        }
      );
      this.$post("CDR/PatientHologram", this.quert).then((res) => {
        this.tableData = res.data.list;
        this.quert.total = res.data.TotalCount * 1;
      });
      loading.close();
    },
    getTopTime() {
      this.$post(
        "CDR/HologramTop?patientCode=" + this.Code + "&hospitalId=00000001"
      ).then((res) => {
        this.top_time = res.data.RightList;
      });
    },
    handleCurrentChange(val) {
      this.quert.PageIndex = val;
      this.getTab();
    },
    handleSizeChange(val) {
      this.quert.PageSize = val;
      this.getTab();
    },
  },
  mounted() {
    this.users = this.$route.query.Name;
    this.Code = this.$route.query.Code;
    this.quert.PatientCode = this.Code;
    this.isUl_width =
      "width:" + (this.top_time.length + 1) * 300 + "px;min-width:1500px";
    this.getTopTime();
    this.getTab();
  },
  created() {
    if (this.$route.query.Token) {
      localStorage.setItem("Token", this.$route.query.Token);
    }
  },
};
</script>
<style lang="scss">
.pacture {
  padding: 10px;
  .p_style {
    text-align: center;
    font-weight: 700;
  }
  .time-horizontal {
    list-style-type: none;
    border-top: 1px solid #707070;
    padding: 0px;
    margin: 0px;
    margin-top: 20px;
  }

  .time-horizontal li {
    float: left;
    position: relative;
    text-align: center;
    width: 300px;
    padding-top: 10px;
    margin-bottom: 10px;
    p {
      margin-top: -40px;
      margin-bottom: 18px;
    }
  }

  .time-horizontal li b:before {
    content: "";
    position: absolute;
    top: -7px;
    left: 47%;
    width: 12px;
    height: 12px;
    border: 2px solid #4c4c4c;
    border-radius: 8px;
    background: #4c4c4c;
  }

  .top_box .el-step__title {
    font-size: 16px;
    line-height: 38px;
    margin-top: -55px;
    margin-bottom: 26px;
  }
  .top_box .card_time .el-card__body {
    padding-top: 40px;
  }

  .el-table--enable-row-transition .el-table__body td.el-table__cell {
    overflow: auto;
  }
  .bottom_box .time-horizontal li {
    float: left;
    position: relative;
    text-align: center;
    width: 300px;
    padding-top: 10px;
    margin-bottom: 10px;
    p {
      margin-top: 0;
      margin-bottom: 0;
    }
  }
  ::-webkit-scrollbar {
    /*滚动条整体样式*/

    width: 5px; /*高宽分别对应横竖滚动条的尺寸*/

    height: 8px;
  }
}
</style>
